﻿<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<style>
    html, body {
        height: 100%
    }

    .box {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF');
        background-image: linear-gradient(bottom,#69F 0,#69F 100%);
        background-image: -o-linear-gradient(bottom,#69F 0,#69F 100%);
        background-image: -moz-linear-gradient(bottom,#69F 0,#69F 100%);
        background-image: -webkit-linear-gradient(bottom,#69F 0,#69F 100%);
        background-image: -ms-linear-gradient(bottom,#69F 0,#69F 100%);
        margin: 0 auto;
        position: relative;
        width: 100%;
        height: 100%
    }

    .login-box {
        width: 100%;
        max-width: 500px;
        height: 400px;
        position: absolute;
        top: 50%;
        margin-top: -200px
    }

    @@media screen and (min-width:500px) {
        .login-box {
            left: 50%;
            margin-left: -250px
        }
    }

    .form {
        width: 100%;
        max-width: 500px;
        height: 275px;
        margin: 25px auto 0 auto;
        padding-top: 25px
    }

    .login-content {
        height: 300px;
        width: 100%;
        max-width: 500px;
        background-color: rgba(255,250,2550,.6);
        float: left
    }

    .input-group {
        margin: 0 0 30px 0 !important
    }

    .form-control, .input-group {
        height: 40px
    }

    .form-group {
        margin-bottom: 0 !important
    }

    .login-title {
        padding: 20px 10px;
        background-color: rgba(0,0,0,.6)
    }

        .login-title h1 {
            margin-top: 10px !important
        }

        .login-title small {
            color: #fff
        }

    .link p {
        line-height: 20px;
        margin-top: 30px
    }

    .btn-sm {
        padding: 8px 24px !important;
        font-size: 16px !important
    }
</style>

<div class="box" style="margin:100px;height:400px;width:500px;">
    <div class="login-box">
        <div class="login-title text-center">
            <h1><small>登录</small></h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <form action="#" method="post">
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="text" id="password" name="password" class="form-control" placeholder="密码">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-actions">
                        <div class="col-xs-4 col-xs-offset-4 ">
                            <button type="button" id="Login" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-off"></span> 登录</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#Login").click(function () {
            $.ajax({
                type: "get",
                url: "/api/Account/Login",
                data: { userName: $("#username").val(), password: $("#password").val() },
                success: function (data, status) {
                        if (data.type==0) {
                            alert("登录失败");
                            return;
                        }
                        alert("登录成功:Token"+data.message);
                },
                error: function (e) {
                    alert("登录失败!");
                },
                complete: function () {

                }
            });
        });
    });
</script>